<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改密码</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div style="position: relative;margin-left:50%;transform:translateX(-50%)">
        <el-form :model="form" label-width="140px" :rules="rules" ref="form" size="small">
          <el-form-item label="旧密码：" prop="pwd">
            <el-input v-model="form.pwd" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="npwd">
            <el-input v-model="form.npwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="再次确认密码：" prop="cnpwd">
            <el-input v-model="form.cnpwd" type="password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button type="default" @click="pageBack">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {status, user} from "../../request";

export default {
  name: "UpdatePwd",
  data() {
    return {
      form: {}, rules: {
        pwd: [{required: true, message: '*必填'}],
        npwd: [{required: true, message: '*必填'}],
        cnpwd: [{required: true, message: '*必填'}],
      }
    };
  },
  created() {

  },
  methods: {
    pageBack() {
      this.$router.back();
    },
    /**
     * 提交表单
     */
    submitForm() {
      this.$refs.form.validate(async valid => {
        console.log(valid);
        if (!valid) return this.$message.error('请输入必填信息');

        const res = await user.updatePwd(this.form);
        if (res.code == status.SUCCESS) {
          this.$message.success(res.msg);
          setTimeout(() => {
            window.sessionStorage.clear();
            this.$router.push("/login");
          }, 1000);
        }
      });
    },
  },
}
</script>

<style scoped>

</style>
